<template>
  <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
    <div class="avue-header">
      <!-- 顶部导航栏 -->
      <top ref="top" />
    </div>
    <div class="avue-layout">
      <div class="avue-left">
        <!-- 左侧导航栏 -->
        <sidebar />
      </div>
      <div class="avue-main">
        <!-- 顶部标签卡 -->
        <tags />
        <transition name="fade-scale">
          <search class="avue-view" v-show="isSearch"></search>
        </transition>
        <!-- 主体视图层 -->
        <div style="height: 100%; overflow-y: auto; overflow-x: hidden" id="avue-view" v-show="!isSearch">
          <!-- 一级菜单 -->
          <keep-alive :exclude="excludeComponentsName">
            <router-view class="avue-view" v-if="$route.meta.keepAlive" />
          </keep-alive>
          <router-view class="avue-view" v-if="!$route.meta.keepAlive" :key="key" />
        </div>
      </div>
    </div>
    <div class="avue-shade" @click="showCollapse"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import tags from './tags';
import search from './search';
import top from './top/';
import sidebar from './sidebar/';
import admin from '@/util/admin';
import { validatenull } from '@/util/validate';
import { calcDate } from '@/util/date.js';
import { getStore } from '@/util/store.js';
import { firstMenu } from '@/config/noCacheList.js';
export default {
  components: {
    top,
    tags,
    search,
    sidebar
  },
  name: 'index',
  provide() {
    return {
      index: this
    };
  },
  data() {
    return {
      excludeComponentsName: firstMenu,
      //搜索控制
      isSearch: false,
      //刷新token锁
      refreshLock: false,
      //刷新token的时间
      refreshTime: ''
    };
  },
  created() {
    //实时检测刷新token
    this.refreshToken();
  },
  mounted() {
    this.init();
    // 首次进入页面清除表格左上角按钮的 is-plain
    this.removeBtnPlainStyle();
  },
  updated() {
    // content 内容变化清除表格左上角按钮的 is-plain
    this.removeBtnPlainStyle();
  },
  computed: {
    ...mapGetters(['isMenu', 'isLock', 'isCollapse', 'website', 'menu']),
    key() {
      return this.$route.path + Math.random();
    }
  },
  props: [],
  methods: {
    showCollapse() {
      this.$store.commit('SET_COLLAPSE');
    },
    // 初始化
    init() {
      this.$store.commit('SET_SCREEN', admin.getScreen());
      window.onresize = () => {
        setTimeout(() => {
          this.$store.commit('SET_SCREEN', admin.getScreen());
        }, 0);
      };
      this.$store.dispatch('FlowRoutes').then(() => {});
    },
    //打开菜单
    openMenu(item = {}) {
      this.$store.dispatch('GetMenu', item.id).then((data) => {
        if (data.length !== 0) {
          this.$router.$avueRouter.formatRoutes(data, true);
        }
        //当点击顶部菜单后默认打开第一个菜单
        /*if (!this.validatenull(item)) {
                  let itemActive = {},
                    childItemActive = 0;
                  if (item.path) {
                    itemActive = item;
                  } else {
                    if (this.menu[childItemActive].length === 0) {
                      itemActive = this.menu[childItemActive];
                    } else {
                      itemActive = this.menu[childItemActive].children[childItemActive];
                    }
                  }
                  this.$store.commit('SET_MENU_ID', item);
                  this.$router.push({
                    path: this.$router.$avueRouter.getPath({
                      name: (itemActive.label || itemActive.name),
                      src: itemActive.path
                    }, itemActive.meta)
                  });
                }*/
      });
    },
    // 定时检测token
    refreshToken() {
      this.refreshTime = setInterval(() => {
        const token =
          getStore({
            name: 'token',
            debug: true
          }) || {};
        const date = calcDate(token.datetime, new Date().getTime());
        if (validatenull(date)) return;
        if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
          this.refreshLock = true;
          this.$store
            .dispatch('refreshToken')
            .then(() => {
              this.refreshLock = false;
            })
            .catch(() => {
              this.refreshLock = false;
            });
        }
      }, 10000);
    },
    removeBtnPlainStyle() {
      const elements = document.querySelector('.avue-crud__left');
      const btns = elements && elements.querySelectorAll('.is-plain');
      if (btns && btns.length) {
        btns.forEach((element) => {
          element.classList.remove('is-plain');
        });
      }
    }
  }
};
</script>
